<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  
</head>
<body>
  <div id="app">
    <div>水果列表</div>
    <ul>
      <li :key='item.id' v-for = 'item in myFruits'>
        <span>水果名称:{{item.cname}}</span> <br>
        <span>水果价格:{{item.price}}</span> <br>
        <span>-----</span>
      </li>

    </ul>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      要求:根据myFruits数组元素的个数, 循环渲染对应个数的li结构, 并填充好对应的数据
    */
    var vm = new Vue({
      el: '#app',
      data: {
        myFruits: [{
          id: 1,
          cname: '苹果',
          price: 15
        },{
          id: 2,
          cname: '橙子',
          price: 35
        },{
          id: 3,
          cname: '香蕉',
          price: 5
        }]
      }
    });
  </script>
</body>
</html>
